import { colorStr } from '@/utils/utils';
import { Avatar, Badge } from 'antd';
import React, { useState } from 'react';
import ConversationSale from '../ConversationSale';
import style from './index.less';

const SaleBadge: React.FC = () => {
  const [conversationModal, setConversationModal] = useState<boolean>(false);
  const color = localStorage.getItem('color') || '#1a7721';

  return (
    <div className={style.container}>
      <Badge>
        <Avatar
          shape="square"
          size={50}
          style={{ backgroundColor: colorStr(6), color: '#fff' }}
          onClick={() => {
            setConversationModal(true);
          }}
        >
          <div className={style.infoBox}>&nbsp;消息&nbsp;</div>
        </Avatar>
      </Badge>
      <ConversationSale
        color={color}
        visible={conversationModal}
        onCancel={() => {
          setConversationModal(false);
        }}
      />
    </div>
  );
};

export default SaleBadge;
